<template>
	<el-dialog :model-value="visible" title="分配角色" :before-close="beforeClose">
		<el-form :model="roleForm">
			<el-form-item label="角色名称：" label-width="120px">
				<el-input v-model="roleForm.name" placeholder="请输入角色名称" />
			</el-form-item>
			<el-form-item label="描述：" label-width="120px">
				<el-input type="textarea" v-model="roleForm.description" placeholder="请输入描述" />
			</el-form-item>
			<el-form-item label="是否启用：" label-width="120px">
				<el-radio-group :model-value="roleForm.status" @change="changeFn">
					<el-radio :label="1">是</el-radio>
					<el-radio :label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleCancel">取消</el-button>
				<el-button type="primary" @click="handleCancelEdit">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from "vue";
import type { roleListItem } from "@/types/global";
import type { Ref } from "vue";
// 接收父传过来的参数
const props = defineProps<{ visible: boolean; form: roleListItem }>();
const roleForm = ref({}) as Ref<roleListItem>;
const originForm = ref({}) as Ref<roleListItem>;
const changeFn = (e: any) => {
	roleForm.value.status = e;
};
watch(
	() => {
		return props.form;
	},
	(newVal) => {
		roleForm.value = { ...newVal };
		originForm.value = { ...newVal };
	},
	{ immediate: true }
);
const emit = defineEmits<{
	(event: "cancel"): void;
	(event: "confirm", form: roleListItem): void;
}>();
// 取消
const handleCancel = () => {
	emit("cancel");
	roleForm.value = { ...originForm.value };
};
// 编辑
const handleCancelEdit = () => {
	emit("confirm", roleForm.value);
};
// 模态框关闭前的回调
const beforeClose = () => {
	handleCancel(); //重新调用关闭的事件
};
</script>

<style scoped></style>
